<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/WEB-INF/templates/default.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:my="http://java.sun.com/jsf/composite/components">
    <ui:define name="content">
        <h:outputStylesheet name="app.css" library="css"/>
        <h:outputScript target="head" name="showMessage.js" library="js"/>

        <h1>Welcome to JBoss!</h1>

        <div>
            <p>You have successfully deployed a RichFaces web application.</p>

            <h3>Your application can run on:</h3>
            <h:graphicImage library="gfx" name="dualbrand_as7eap.png"/>
        </div>

       <h:form id="reg">
          <rich:panel id="newMemberPanel" styleClass=".form" header="Member Registration" headerClass="header">
              <p>Enforces annotation-based constraints defined on the model class.</p>

              <my:memberForm id="memberForm" member="#{newMember}"/>

             <h:panelGrid columns="2">
                <a4j:commandButton id="register" action="#{memberController.register}" value="Register"
                                   styleClass="register" execute="newMemberPanel" render="newMemberPanel"/>
                <rich:messages globalOnly="true"/>
             </h:panelGrid>
          </rich:panel>
          <br />

          <div id="newMemberMessages" class="update"/>

          <rich:collapsiblePanel id="memberList" header="Members" headerClass="header" title="Click to expand/collapse">
             <h:panelGroup rendered="#{empty members}">
                <em>No registered members.</em>
             </h:panelGroup>
             <rich:dataTable id="memberTable" var="_member" value="#{members}" rendered="#{not empty members}" style="width : 100%">
                   <rich:column id="view">
                      <a4j:commandLink styleClass="no-decor" render="memberPanel" execute="@this"
                                       oncomplete="#{rich:component('memberPopup')}.show()">
                         View
                         <f:setPropertyActionListener target="#{memberController.member}" value="#{_member}"/>
                      </a4j:commandLink>
                   </rich:column>
                   <rich:column id="member_id">
                      <f:facet name="header">Id</f:facet>
                      #{_member.id}
                   </rich:column>
                   <rich:column id="member_name">
                      <f:facet name="header">Name</f:facet>
                      #{_member.name}
                   </rich:column>
                   <rich:column id="member_email">
                      <f:facet name="header">Email</f:facet>
                      #{_member.email}
                   </rich:column>
                   <rich:column id="member_phone">
                      <f:facet name="header">Phone #</f:facet>
                      #{_member.phoneNumber}
                   </rich:column>
                   <rich:column id="member_rest_url">
                      <f:facet name="header">REST URL</f:facet>
                      <a href="#{request.contextPath}/rest/members/#{_member.id}" target="_rest_member">/rest/members/#{_member.id}</a>
                   </rich:column>
                   <f:facet name="footer">
                      REST URL for all members: <a href="#{request.contextPath}/rest/members" target="_rest_all">/rest/members</a>
                   </f:facet>
                </rich:dataTable>
          </rich:collapsiblePanel>

          <rich:popupPanel id="memberPopup" modal="true" onmaskclick="#{rich:component('memberPopup')}.hide()"
                           domElementAttachment="form" autosized="true">
             <f:facet name="header">
                <h:outputText value="Member Details"/>
             </f:facet>
             <f:facet name="controls">
                <h:outputLink value="#" onclick="#{rich:component('memberPopup')}.hide(); return false;">
                   X
                </h:outputLink>
             </f:facet>
             <h:panelGroup id="memberPanel">
                <my:memberForm member="#{member}"/>
             </h:panelGroup>
          </rich:popupPanel>

          <a4j:push address="pushCdi" ondataavailable="showMessage(event.rf.data)">
             <a4j:ajax event="dataavailable" render="memberList" />
          </a4j:push>

       </h:form>
    </ui:define>
</ui:composition>
